<template>
  <div class="home-container">
    <!-- 欢迎信息条 -->
    <div class="welcome-bar">
      <h2>欢迎回来，{{ username }}</h2>
    </div>

    <!-- 数据概览卡片 -->
    <el-row :gutter="20" class="data-overview">
      <el-col :span="6" v-for="card in dataCards" :key="card.title">
        <el-card shadow="hover" :class="['data-card', card.type]">
          <div class="card-content">
            <div class="card-icon">
              <el-icon><component :is="card.icon" /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-number">{{ card.value }}</div>
              <div class="card-footer">
                较昨日
                <span :class="['change-rate', card.trend]">
                  {{ card.trend === 'up' ? '+' : '-' }}{{ card.change }}
                  {{ card.unit || '' }}
                </span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 功能区域 -->
    <el-row :gutter="20" class="function-area">
      <!-- 快捷操作 -->
      <el-col :span="8">
        <el-card class="quick-actions" shadow="hover">
          <template #header>
            <div class="section-header">
              <el-icon><Operation /></el-icon>
              <span>快捷操作</span>
            </div>
          </template>
          <div class="action-grid">
            <el-button v-for="action in quickActions" 
                       :key="action.name"
                       :type="action.type"
                       @click="$router.push(action.route)">
              <el-icon><component :is="action.icon" /></el-icon>
              {{ action.name }}
            </el-button>
          </div>
        </el-card>
      </el-col>
      
      <!-- 系统公告 -->
      <el-col :span="16">
        <el-card class="notice-board" shadow="hover">
          <template #header>
            <div class="section-header">
              <el-icon><Bell /></el-icon>
              <span>系统公告</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="notice in notices"
              :key="notice.id"
              :timestamp="notice.time"
              :type="notice.type">
              {{ notice.content }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { 
  User, ShoppingCart, Goods, Money, 
  Plus, List, Menu, Operation, Bell 
} from '@element-plus/icons-vue'

const username = ref('管理员')
const lastLoginTime = ref('2024-05-15 08:30:00')

// 数据卡片配置
const dataCards = [
  {
    title: '用户总数',
    value: '1,234',
    change: '15',
    trend: 'up',
    icon: 'User',
    type: 'primary'
  },
  {
    title: '订单总数',
    value: '856',
    change: '23',
    trend: 'up',
    icon: 'ShoppingCart',
    type: 'success'
  },
  {
    title: '商品总数',
    value: '450',
    change: '8',
    trend: 'up',
    icon: 'Goods',
    type: 'warning'
  },
  {
    title: '总销售额',
    value: '¥123,456.00',
    change: '12.5',
    trend: 'up',
    unit: '%',
    icon: 'Money',
    type: 'danger'
  }
]

// 快捷操作配置
const quickActions = [
  { name: '添加商品', icon: 'Plus', route: '/admin/goods/add', type: 'primary' },
  { name: '订单管理', icon: 'List', route: '/admin/orders', type: 'success' },
  { name: '用户管理', icon: 'User', route: '/admin/users', type: 'warning' },
  { name: '轮播图管理', icon: 'Menu', route: '/admin/banner', type: 'info' }
]

// 系统公告
const notices = [
  { 
    id: 1, 
    content: '系统将于今晚24:00进行例行维护，请提前做好相关工作安排',
    type: 'warning'
  },
  { 
    id: 2, 
    content: '新版本功能上线公告：支持批量导入商品',
    type: 'success'
  },
  { 
    id: 3, 
    content: '五月份销售数据分析报告已生成',
    type: 'info'
  }
]
</script>

<style scoped>
.home-container {
  min-height: calc(100vh - 120px);
  padding: 20px;
  background-color: #f0f2f5;
}

.welcome-bar {
  background: linear-gradient(90deg, #1890ff, #52c41a);
  color: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-overview {
  margin-bottom: 20px;
}

.data-card {
  height: 120px;
  transition: all 0.3s;
  border: none;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.card-icon {
  font-size: 48px;
  padding: 0 20px;
  opacity: 0.8;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #666;
}

.card-number {
  font-size: 24px;
  font-weight: bold;
  margin: 8px 0;
}

.card-footer {
  font-size: 12px;
}

.change-rate {
  padding: 2px 6px;
  border-radius: 4px;
}

.change-rate.up {
  color: #52c41a;
  background: rgba(82, 196, 26, 0.1);
}

.function-area {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: bold;
}

.quick-actions .action-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.quick-actions .el-button {
  flex: 1 1 calc(50% - 5px);  /* 每行两个按钮，减去间距 */
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;  /* 清除默认边距 */
}

/* 确保图标和文字的对齐 */
.quick-actions .el-button .el-icon {
  margin-right: 8px;
  font-size: 16px;
}

.notice-board {
  height: 100%;
}

.el-timeline {
  padding: 10px;
}

/* 卡片主题色 */
.data-card.primary :deep(.el-card__body) { background-color: #e6f7ff; }
.data-card.success :deep(.el-card__body) { background-color: #f6ffed; }
.data-card.warning :deep(.el-card__body) { background-color: #fffbe6; }
.data-card.danger :deep(.el-card__body) { background-color: #fff2f0; }
</style>
